<template>
  <!-- <button type="button" class="el-button"> -->
  <!-- <button type="button" :class="['el-button', `el-button--${type ? type : 'default'}`]"> -->
  <button
    @click="$emit('click', $event)"
    :type="nativeType"
    :autofocus="autofocus"
    :disabled="disabled || loading"
    :class="[
      'el-button',
      `el-button--${type || 'default'}`,
      size && `el-button--${size}`,
      {
        // !当 value 是 true 的时候，会把 key 直接当做 class
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled,
        'is-loading': loading,
      },
    ]"
  >
    <i v-if="loading" class="el-icon-loading"></i>
    <i v-if="icon" :class="icon"></i>
    <!-- //!如果说有默认插槽才展示 span -->
    <span v-if="$slots.default">
      <!-- 挖一下坑 -->
      <slot />
      <!-- 如果传递了 icon，这儿会有一个 i 标签，i 标签的 class 的值就是 icon -->
    </span>
  </button>
</template>
<script>
export default {
  name: "ElButton",
  // 接收 type，拼接成 `el-button--${type}` 作为 class 的值
  props: {
    type: {
      type: String,
      // 这儿不指定默认值，也能实现一样的效果
      // default: 'default'
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    icon: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    size: String,
    autofocus: {
      type: Boolean,
      default: false,
    },
    nativeType: {
      type: String,
      default: 'button',
    }
  },
  created() {
    // 是一个对象，对象里面包含了插槽信息
    // console.log(this.$slots);
  },
};
</script>